<template>
  <view class="page-ranking">
    <!-- 菜单 -->
    <view class="page-header-tabs">
      <uiTabs
        customClass="ranking-tabs"
        :navPerView="4"
        v-model="type"
        :height="98"
        :line="false"
        :lineHeight="8"
        lineWidth="36rpx"
        color="#2c2c35"
        activeColor="#f54305"
        @change="handleChangeTypeTabs"
      >
        <uiTabsItem :title="item.label" v-for="item in typeList" :key="item.value"></uiTabsItem>
      </uiTabs>
      <uiTabs
        customClass="ranking-tabs"
        :navPerView="3"
        v-model="type2"
        :height="98"
        :line="false"
        :lineHeight="8"
        lineWidth="36rpx"
        color="#2c2c35"
        activeColor="#f54305"
        @change="handleChangeTimeTabs"
      >
        <uiTabsItem :title="item.label" v-for="item in timelist" :key="item.value"></uiTabsItem>
      </uiTabs>
    </view>
    <view class="page-scroll">
      <uiScroll
        top="204rpx"
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        :up="upOption"
        @up="loadOrderListData"
      >
        <view class="ranking-lesson ui-flex ui-1px-b" v-for="(item, index) in list" :key="index">
          <view class="ranging-icon">
            <template v-if="index === 0">
              <image class="ranging-icon--image" src="/static/images/ranking/top1.png" />
            </template>
            <template v-else-if="index === 1">
              <image class="ranging-icon--image" src="/static/images/ranking/top2.png" />
            </template>
            <template v-else-if="index === 2">
              <image class="ranging-icon--image" src="/static/images/ranking/top3.png" />
            </template>
            <template v-else>
              <text>{{index + 1}}</text>
            </template>
          </view>
          <lessonFisnished
            class="ranking-lesson--content"
            :lessionId="item.lessonId"
            :lessonPicPath="item.lessonPic"
            :lessonName="item.lessonName"
            :lecturePic="item.lecturePic"
            :lecturerName="item.lecturerName"
            :lessonPrice="item.lessonPrice"
            :clickNum="item.clickNum"
            :subNum="item.subNum"
            :isVipLesson="item.isVipLesson"
            :lessonCheapPrice="item.lessonCheapPrice"
          ></lessonFisnished>
        </view>
      </uiScroll>
    </view>
  </view>
</template>

<script>
import uiScroll from "@/components/base/scroll/mescroll-body";
import uiScrollMixins from "@/components/base/scroll/mescroll-mixins.js";
import { selectRankingListAPI } from "api/order/order.js";
import uiTabs from "@/components/base/tabs/index";
import uiTabsItem from "@/components/base/tabs-item/index";
import uiButton from "@/components/base/button/index";
import { url } from "@/utils/url.js";

import lessonFisnished from "@/components/business/lession/lession-row-ranking";

export default {
  name: "orderManagePage",
  components: {
    uiScroll,
    uiTabs,
    uiTabsItem,
    lessonFisnished,
    uiButton
  },
  mixins: [uiScrollMixins],
  data() {
    return {
      //
      typeList: [
        {
          label: "综合",
          value: 4
        },
        {
          label: "学习人数榜",
          value: 1
        },
        {
          label: "人气",
          value: 2
        },
        {
          label: "课程销量榜",
          value: 3
        }
      ],
      timelist: [
        {
          label: "周榜",
          value: 1
        },
        {
          label: "月榜",
          value: 2
        },
        {
          label: "年榜",
          value: 3
        }
      ],
      type: 0,
      type2: 0,
      // 下拉刷新的常用配置
      downOption: {
        use: false, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        textNoMore: "没有更多数据",
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 5, // 每页数据的数量,默认10
          totalPage: 1
        },
        empty: {
          tip: "暂无相关数据"
        }
      },
      // 当前页面查询的参数
      activeIndex: 0,
      list: []
    };
  },
  created() {
    // this.loadRecommended();
  },

  methods: {
    loadOrderListData(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      var params = {
        page: {
          currentPage: page.num,
          pageNumber: pageSize
        },
        type: this.typeList[this.type].value,
        type2: this.timelist[this.type2].value
      };
      var _this = this;
      selectRankingListAPI(params).then(({ respCode, respMsg, result }) => {
        this.isloading = false;
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(result.list); //追加新数据
        this.mescroll.endByPage(this.list.length, result.page.totalPage);
      });
    },

    handleChangeTypeTabs(index) {
      this.list = [];
      this.upOption.page.num = 0;
      this.loadOrderListData(this.upOption.page);
    },
    handleChangeTimeTabs() {
      this.list = [];
      this.upOption.page.num = 0;
      this.loadOrderListData(this.upOption.page);
    }
  }
};
</script>

<style scoped lang="scss" >
.page-header-tabs {
  z-index: 9990;
  position: fixed;
  top: --window-top; /* css变量 */
  left: 0;
  width: 100%;
  height: 196upx;
  background-color: white;
}

.page-scroll {
  background-color: $fill-base;
}

.ranking-lesson {
  padding: 30rpx 30rpx 30rpx 0;
  box-sizing: border-box;
  align-items: flex-start;
  .ranging-icon {
    flex: 0 0 60rpx;
    text-align: center;
    font-size: 24rpx;
    color: #797979;
    .ranging-icon--image {
      width: 35rpx;
      height: 40rpx;
    }
  }

  .ranking-lesson--content {
    flex: 1;
  }
}

>>> .ranking-tabs {
  &::after {
    @include line-bottom($border-color-base);
  }
}
</style>
